import { defineStore } from 'pinia'
import { zhCN, dateZhCN, darkTheme } from 'naive-ui'

interface Config {
    theme: string
    locale: string
    dateLocale: string
    panelMode: string
    themeColor: string
}

export const useConfigStore = defineStore('config', {
    state: (): Config => ({
        theme: "",
        locale: "zhCN",
        dateLocale: "dateZhCN",
        panelMode: "1",
        themeColor: "rgb(24, 160, 88)"
    }),
    getters: {
        getTheme: (state) => {
            return () => {
                if (state.theme === "darkTheme") {
                    return darkTheme
                } else {
                    return null
                }
            }
        },
        getLocale: (state) => {
            return () => {
                if (state.locale === "zhCN") {
                    return zhCN
                } else {
                    return null
                }
            }
        },
        getDateLocale: (state) => {
            return () => {
                if (state.dateLocale === "dateZhCN") {
                    return dateZhCN
                } else {
                    return null
                }
            }
        },
        getPanelMode: (state) => {
            return () => {
                return state.panelMode
            }
        },
        getThemeColor: (state) => {
            return () => {
                return state.themeColor
            }
        },
        getConfig: (state) => {
            return () => {
                return state
            }
        }
    },
    actions: {
        darkTheme() {
            this.theme = "darkTheme"
            document.getElementById("app")?.style.setProperty('--flame-color-scheme', 'dark');
            document.getElementById("app")?.style.setProperty('--flame-icon-background-color', 'rgba(255, 255, 255, .16)');
            document.getElementById("app")?.style.setProperty('--flame-home-content-background-color', '#000000');
            document.getElementById("app")?.style.setProperty('--flame-container-color', 'rgb(24, 24, 28)');
            localStorage.setItem("theme", "darkTheme")
        },
        defaultTheme() {
            this.theme = ""
            this.locale = "zhCN"
            this.dateLocale = "dateZhCN"
            document.getElementById("app")?.style.setProperty('--flame-color-scheme', 'normal');
            if (this.panelMode === '0') {
                document.getElementById("app")?.style.setProperty('--flame-icon-background-color', 'rgba(255, 255, 255, .16)');
            } else {
                document.getElementById("app")?.style.setProperty('--flame-icon-background-color', 'rgba(0, 0, 0, .16)');
            }
            document.getElementById("app")?.style.setProperty('--flame-home-content-background-color', '#eef0f6');
            document.getElementById("app")?.style.setProperty('--flame-container-color', 'rgb(255, 255, 255)');
            localStorage.setItem("theme", "defaultTheme")
        },
        setPanelMode(panelMode: string) {
            this.panelMode = panelMode
            localStorage.setItem("panelMode", panelMode)
            if (this.theme === "darkTheme") {
                document.getElementById("app")?.style.setProperty('--flame-icon-background-color', 'rgba(255, 255, 255, .16)');
            } else {
                if (this.panelMode === '0') {
                    document.getElementById("app")?.style.setProperty('--flame-icon-background-color', 'rgba(255, 255, 255, .16)');
                } else {
                    document.getElementById("app")?.style.setProperty('--flame-icon-background-color', 'rgba(0, 0, 0, .16)');
                }
            }
        },
        setThemeColor(themeColor: string) {
            this.themeColor = themeColor
            localStorage.setItem("themeColor", themeColor)
            document.getElementById("app")?.style.setProperty('--flame-primary-color', themeColor);
            document.getElementById("app")?.style.setProperty('--flame-primary-color-transparent', themeColor.replace("rgb", "rgba").replace(")", ", 0.1)"));
        },
        reset() {
            this.defaultTheme()
            this.setPanelMode("1")
            this.setThemeColor("rgb(24, 160, 88)")
        },
        loadConfig() {
            const panelMode = localStorage.getItem("panelMode")
            if (panelMode && panelMode !== "") {
                this.panelMode = panelMode
            } else {
                this.panelMode = "1"
            }
            const themeColor = localStorage.getItem("themeColor")
            if (themeColor && themeColor !== "") {
                this.themeColor = themeColor
            } else {
                this.themeColor = "rgb(24, 160, 88)"
            }
            const theme = localStorage.getItem("theme")
            if (theme && theme === "darkTheme") {
                this.darkTheme()
            } else {
                this.defaultTheme()
            }
            document.getElementById("app")?.style.setProperty('--flame-primary-color', this.themeColor);
            document.getElementById("app")?.style.setProperty('--flame-primary-color-transparent', this.themeColor.replace("rgb", "rgba").replace(")", ", 0.1)"));
        }
    }
})